/* pages/profile/friendInfo/index.wxss */
.downMessageFrPopupBox {
  width: 100%;
  max-height: 86vh;
  height: auto;
  background-color: #f6f5f7;
  overflow: hidden;

  .applyHeadBox {
    width: 100%;
    height: auto;
    padding: 30rpx 35rpx 40rpx;
    box-sizing: border-box;
    background: #FFF0E6;
    display: flex;
    flex-direction: column;
    justify-content: flex-center;
    border-radius: 40rpx;


    .headTitle {
      overflow-wrap: break-word;
      color: rgba(255, 120, 40, 1.000000);
      font-size: 40rpx;
      font-family: PingFang SC-Semibold;
      font-weight: 600;
      text-align: left;
      white-space: nowrap;
      line-height: 56rpx;
      margin: 0 0 30rpx;
    }

    .paragraph_1 {
      width: 90%;
      overflow-wrap: break-word;
      color: rgba(49, 49, 49, 1.000000);
      font-size: 28rpx;
      font-family: PingFang SC-Regular;
      font-weight: normal;
      text-align: left;
      line-height: 44rpx;
    }
  }
  .updateIconBox {
    width: 120rpx;
    height: 120rpx;
  }

  .friendContainer {
    width: 100%;
    max-height: 70vh;
    height: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-bottom: 40rpx;
    margin: 0 auto;
    .friendSourceBox{
      background: #FFF0E6;
      padding: 30rpx 40rpx;
      .frd-topTit{
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #FF7828;
        line-height: 28px;
        text-align: left;
      }
      .frd-sourceTip{
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #313131;
        line-height: 22px;
        &::before{
          content: "";
          width: 10px;
          min-width: 10px;
          height: 10px;
          background: #FF7828;
          border-radius: 50%;
          margin-right: 20rpx;
        }
      }
    }
    .sliderBox {
      width: 100%;
      height: auto;
      margin: 30rpx;

      .sliderEveryOne {
        // width: 200rpx;
        height: 20rpx;
        background: #f8d8c4;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-left: 20rpx;
      }

      .sliderSelect {
        // width: 200rpx;
        height: 20rpx;
        background: #FF7828;
        animation: swiperSliderAnimation 0.5s alternate;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-left: 20rpx;
      }
    }
  }

  .headBox {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;

    .nameText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #313131;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-left: 20rpx;
    }
  }

  .infoTitle {
    font-size: 40rpx;
    color: #ff7828;
    text-align: left;
    font-weight: 600;
    margin: 15rpx 0 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    color: #FF7828;
    line-height: 64rpx;
  }

  .contentBox {
    width: 92%;
    height: auto;
    background: #FFFFFF;
    margin: 20rpx auto;
    border-radius: 16rpx;
    padding: 30rpx;
    box-sizing: border-box;
  }

  .swiperBox {
    width: 90%;
    margin: 0 auto;

    .swiperContentBox {
      width: 100%;
      // height: 500rpx;
      height: 95vw;
      border-radius: 20rpx;
      overflow: hidden;
      border: 1px solid rgb(224, 224, 224);
    }

    .swiperImg {
      width: 89vw;
      height: 104vw;
      margin: 0 auto;

      image {
        width: 100%;
        // height: 470rpx;
        height: 104vw;
        border-radius: 20rpx;
      }
    }
  }

  // 以下是个人详情模块
  .selfIntroductionBox {
    height: auto;

    .infoDes {
      font-size: 28rpx;
      color: #313131;
      font-family: PingFang SC, PingFang SC;
      text-transform: none;
      font-style: normal;
      font-weight: 400;
      line-height: 50rpx;
      text-align: left;
      text-indent: 30rpx;
      margin: 45rpx 0;
    }
  }

  .flexXStart {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .flexXSp {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flexXCenter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .friendFooter {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
  }

  .userHeadBox {
    width: 100%;
    background: #f6f6f6;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    margin: 45rpx auto;
  }

  .iconBox {
    width: 45rpx;
    height: 45rpx;
  }

  .yearBox {
    width: 33%;
    font-size: 28rpx;

    image {
      margin: 0 6rpx;
    }
  }

  .friendFooter {
    width: 100%;
    height: auto;
    background: #fff;
    box-sizing: border-box;
    padding: 50rpx;
  }

  .friendMiddleBox {
    width: 100%;
    height: auto;
    margin: 30rpx 0;

    .remarkText {
      margin-left: 20rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #313131;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .select-bar {
    width: 100%;
    margin: 30rpx 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;

    .select-i {
      width: auto;
      height: 64rpx;
      background: #f6f6f6;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      font-family: PingFang SC-Regular;
      font-weight: 400;
      font-size: 24rpx;
      color: #313131;
      line-height: 64rpx;
      text-align: center;
      padding: 0 25rpx;
      box-sizing: border-box;
      margin: 10rpx;
    }

    .selected {
      background: #FFF0E6;
      color: #FF7828;
      border: none;
    }
  }

  .selectBarSkill {
    width: 100%;
    margin: 30rpx 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;

    .select-i {
      width: auto;
      height: 64rpx;
      background: #f6f6f6;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      font-family: PingFang SC-Regular;
      font-weight: 400;
      font-size: 24rpx;
      color: #313131;
      line-height: 64rpx;
      text-align: center;
      padding: 0 15rpx;
      box-sizing: border-box;
      margin: 10rpx;
    }

    .selected {
      background: #FFF0E6;
      color: #FF7828;
      border: none;
    }
  }

  .skillImgBox {
    display: flex;
    align-items: center;

    image {
      width: 60rpx;
      height: 60rpx;
      padding: 10rpx 10rpx;
      box-sizing: border-box;
    }
  }

  .personalityBox {
    width: 100%;
    height: auto;

    .personalityTopBox {
      width: 100%;
      height: auto;
      text-align: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 40rpx;
      color: #88619A;
      line-height: 26rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;

      .mbitImg {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }

  .personalityContent {
    width: 100%;
    height: auto;

    .personalityTitle {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 35rpx;
      color: #313131;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin: 40rpx 0 25rpx;
    }

    .personalityRemark {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #313131;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      text-indent: 25rpx;
    }
  }

  .headPicBox {
    width: 100%;

    .popopLogorleft,
    .popopLogorRight {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 1px solid #f3d8c4;
    }

    .popopLogorRight {
      width: 120rpx;
      height: 120rpx;
      margin-left: -20rpx;
    }
  }

  .levelBox {
    width: 100%;
    height: auto;

    .levelTopBox {
      width: 100%;
      height: auto;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 35rpx;
      color: #313131;
      line-height: 52rpx;
      text-align: center;

      image {
        width: 100rpx;
        height: 100rpx;
      }
    }

    .levelTipBox {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 25rpx;
      color: #6b6969;
      line-height: 48rpx;
      text-align: center;
      margin: 20rpx 0;
    }

    .levelContentBox {
      width: 100%;
      height: auto;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #313131;
      line-height: 48rpx;
      margin: 20rpx 0;

      image {
        width: 50rpx;
        height: 50rpx;
        margin: 0 40rpx 0 0 ;
      }
    }
  }

}


/* 定义渐变动画 */
@keyframes swiperSliderAnimation {
  from {
    background-color: #f3d8c4;
  }

  to {
    background-color: #ff7828;
  }
}